<template>
    <div class="login_main">
        <!-- <el-form> -->
  <div class="userinput">
      <i class="el-icon-mobile"></i>
      <el-input placeholder="请输入用户名" clearable v-model="form.username">
  </el-input>
  </div>
  <div class="userinput">
      <i class="el-icon-lock"></i>
         <el-input placeholder="请输入密码" clearable show-password v-model="form.password" @change="Iflogin">
  </el-input>
  </div>
  <!-- </el-form> -->
  <LoginHeader>
      <router-link to="/register" slot="i" tag="span" >注册新账号</router-link>
        <span slot="title">忘记密码？</span>
  </LoginHeader>
  <el-button @click="Iflogin">登录</el-button>
  <el-divider>其它方式登录</el-divider>
  <div class="picword">
      <img src="../../assets/njrpic/xiaomi.png" alt="">
      <span>小米</span>
  </div>
  <div class="picword">
      <img src="../../assets/njrpic/sushi.png" alt="">
      <span>素士天猫</span>
  </div>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            form:{
                username:'ces',
                password:'4984'
            },

        }
    },
    components:{
        LoginHeader
    },
    methods:{
        Iflogin(){
            this.$http.post('/api/users/login',this.form).then(({
                    data,
                    config
                }) =>{
                    //解构语法
                    console.log(data, config);
                    if (data.code == 200) {
                        this.$message.success('登录成功')
                        // console.log(res);
                        console.log(data.token);
                        console.log(data.username);
                        this.$store.commit('getusername',data.username)
                        window.sessionStorage.setItem("token",data.token)
                        this.$router.push('/index')
                    } else {
                       this.$message.error('登录失败')
                        // console.log(config.token);
                    }
                })
        }
    }
}
</script>
<style lang="less" scoped>
.login_main{
    width: 70%;
    margin: 0 auto;
    text-align: center;
    .userinput{
        margin-bottom: 20px;
    border-bottom: 5px solid #dedede;
    >i{
        margin: 25px;
    }
    >.el-input{
        width: 80%;
    }
}
.userinput:first-of-type{
    margin-top: 100px;
}
.el-button{
    width: 70%;
    margin:200px 0;
    background-color: #5b20c6;
    color: white;
    padding: 15px;
    border-radius: 30px;
}
.picword{
    width: 25%;
    display: inline-block; 
    margin: 25px 50px 0px 10px;
}
}
</style>